<template>
  <div class="waterfall-all">
    <div @click="linktourl(currentImage['src'])" class="linktourl">
      <span class="linktourl_image">{{
        computedurl(currentImage["src"])
      }}</span>
    </div>
    <div
      :class="
        device === 'mobile' ? 'horizontal-waterfall-all' : 'image-waterfall-all'
      "
      :style="{ height: computedHeight + 'px' }"
    >
      <div class="left-image" v-if="currentImage['image_link']">
        <el-image
          :src="currentImage['image_link']"
          class="el-left-image"
          fit="contain"
        />
      </div>
      <Waterfalhorizontal
        v-if="device === 'mobile'"
        :imageData="imageData"
        @showpic="showpic"
      />
      <Waterfall
        v-else
        :imageData="imageData"
        :columnCount="2"
        :columnGap="10"
        :totalWidth="270"
        class="waterfall"
        @showpic="showpic"
      />
    </div>
  </div>
</template>

<script>
import Waterfall from "@/components/Waterfall";
import Waterfalhorizontal from "@/components/Waterfalhorizontal";
import { search_image } from "@/api/ai";
import { mapGetters } from "vuex";
export default {
  components: {
    Waterfall,
    Waterfalhorizontal,
  },
  props: {
    message: {
      type: String,
      required: true,
    },
  },
  computed: {
    ...mapGetters(["device"]),
    computedurl() {
      return function (val) {
        if (val) {
          var durl = /(http:|https:)\/\/([^\/]+)\//i;
          var domain = val.match(durl);
          console.log(domain);
          return domain[2];
        } else {
          return "";
        }
      };
    },
    computedHeight() {
      const clientHeight = document.documentElement.clientHeight - 120;
      // console.log(clientHeight);
      return clientHeight;
    },
  },
  data() {
    return {
      localname: "",
      imageData: [],
      currentImage: {},
    };
  },
  mounted() {
    this.search_image();
  },
  watch: {
    message(val) {
      this.search_image();
    },
  },
  methods: {
    linktourl(url) {
      window.open(url, "_blank");
    },
    showpic(pic) {
      this.currentImage = pic;
    },

    async search_image() {
      this.currentImage = [];
      let message = this.message;
      if (!message) {
        return;
      }
      let res = await search_image({ query: message });
      this.imageData = res;
      this.currentImage = res.length ? res[0] : "";

      console.log(res, "???????");
    },
  },
};
</script>
<style scoped lang="scss">
.linktourl {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
  cursor: pointer;
  .linktourl_image {
    background: #167dd7;
    color: #fff;
    padding: 0 10px;
    border-radius: 10px;
  }
}
.horizontal-waterfall-all {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .left-image {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
  }
}
.image-waterfall-all {
  display: grid;
  height: 100%;
  overflow: auto;

  grid-template-columns: repeat(10, 1fr);

  .left-image {
    display: flex;
    grid-column: span 7 / span 7;
    align-items: flex-start;
    justify-content: center;
    cursor: pointer;
    align-items: center;
  }

  .el-left-image {
    // width: 100%;
    // height: 100%;
    border-radius: 10px;
  }
  .waterfall {
    grid-column: span 3 / span 3;
  }
}
</style>